<template>
  <div>
    <el-row :gutter="10" style="margin-top: 40px">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <div class="grid-content bg-purple">
          <p class="cha">查询页面</p>
          <div class="yuan-gong">
            <div class="bain">
              <div>员工编号</div>
              <input
                type="text"
                name=""
                id=""
                placeholder="请输入"
                class="qing"
                v-model="ids"
                @keyup.enter="getids"
              />
            </div>
            <div class="bain">
              <div>员工姓名</div>
              <input
                type="text"
                name=""
                id=""
                placeholder="请输入"
                class="qing"
                v-model="names"
              />
            </div>
            <div class="bain">
              <div>员工电话</div>
              <input
                type="text"
                name=""
                id=""
                placeholder="请输入"
                class="qing"
                v-model="phone"
              />
            </div>
            <div class="bain">
              <div>员工职位</div>
              <input
                type="text"
                name=""
                id=""
                placeholder="请输入"
                class="qing"
                v-model="zhiwei"
              />
            </div>
            <div class="an">
              <button style="background: #446ce3" @click="getids">查询</button>
              <button style="background: #61b65c">添加</button>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <div class="bg-bottom bg-pur">
          <p class="sho">我的首页</p>
          <el-table
            :data="tableData"
            height="250"
            style="width: 100%; height: 420px"
          >
            <el-table-column prop="goodsId" label="员工编号" />
            <el-table-column prop="name" label="员工名字" />
            <el-table-column prop="sex" />
            <el-table-column prop="phone" label="员工电话" />
            <el-table-column prop="goodsAddress" label="员工地址" />
            <el-table-column prop="zhiwei" label="员工职位" />
            <el-table-column prop="zaizhi" label="员工状态" />
            <el-table-column prop="mtime" label="工资发放日期" />
            <el-table-column prop="gongz" label="是否发放" />
            <el-table-column prop="yinghan" label="备注" />
          </el-table>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mockapi } from "../../../api/mycaiwu/mock";

export default {
  data() {
    return {
      tableData: "",
      ids: "",
      names: "",
      phone: "",
      zhiwei: "",
    };
  },
  created() {
    this.getgongziapi();
  },
  methods: {
    async getgongziapi() {
      const res = await mockapi.getgongzi();
      this.tableData = res.result.data;
      console.log(this.tableData);
    },
    async getids() {
      const res = await mockapi.getchazhao({
        id: this.ids,
        names: "" || this.names,
        phone: "" || this.phone,
        zhiwei: "" || this.zhiwei,
      });
      console.log(this.ids, this.names);
      this.tableData = res.result;
    },
  },
};
</script>

<style lang="less" scoped>
.el-col {
  border-radius: 4px;
}
.bg-purple {
  background: #fff;
  height: 106.5px;
  .cha {
    width: 100%;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #e9e9e9;
    font-size: 13px;
    font-family: PingFang SC;
    font-weight: 600;
    color: #333333;
    padding-left: 20px;
  }
  .yuan-gong {
    width: 100%;
    height: 35px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin-top: 15px;
    .bain {
      width: 210px;
      height: 35px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .qing {
        width: 150px;
        height: 35px;
        background: #e9e9e9;
        border: none;
        border-radius: 5px;
        padding-left: 10px;
      }
    }
    .an {
      width: 160px;
      height: 35px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      button {
        width: 69px;
        height: 35px;
        color: #fff;
        text-align: center;
        line-height: 35px;
        font-size: 14px;
        border: none;
        border-radius: 5px;
      }
    }
  }
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.bg-bottom {
  border-radius: 4px;
  min-height: 36px;
}
.bg-pur {
  background: #fff;
  width: 100%;
  margin-top: 20px;
  .sho {
    width: 100%;
    height: 40px;
    line-height: 40px;
    font-size: 13px;
    font-family: PingFang SC;
    font-weight: 600;
    color: #333333;
    padding-left: 20px;
  }
  /deep/ .cell {
    text-align: center;
  }
}
</style>
